<template>
  <div id="app">
    <form action="/">
        <van-search
            v-model="value"
            show-action
            placeholder="请输入搜索关键词"
            @search="onSearch"
            @input ="oninput"
            @cancel="onCancel"
            @clear="onclear"
        />
    </form>

    <down-list v-if="blockShow == 1"/>
    <histry-hot v-else-if="blockShow == 2" :historyarr="historyArr"/>
    <product  v-else/>
  </div>
</template>

<script>
  /* 刚进来显示 1、历史区块，2、搜索框情况 
  
  
  */
import { Toast } from 'vant';
import { Getpopupurl } from "@/request/api.js";

import DownList from "@/components/SubPopup/DownList"
import HistryHot from "@/components/SubPopup/HistryHot"
import Product from "@/components/SubPopup/Product"

export default {
  data() {
    return {
      value: "",
      // blockShow 为1时 显示下拉列表，为2时显示历史记录区，为3时显示商品
      blockShow:2,
      historyArr:[],
      hotArr:[]
    };
  },
   watch:{
      value(val){
        if(val == ""){
           this.blockShow = 2;
        }
      }
    },
  methods: {
   
    // 执行搜索命令时（回车），显示商品列表
    onSearch() {
      this.blockShow = 3

    },
    // 点击取消时
    onCancel() {
      // 显示历史区块
      this.blockShow = 2,
      this.$store.commit("controlPopupShow", false);
    },
    // 输入时
    oninput(){
      this.blockShow = 1
    },
    // 点击清理按钮
    onclear(){
      this.blockShow = 2
    }
  },
  components:{
    DownList,
    HistryHot,
    Product
  },
  created() {
    Getpopupurl().then(res => {
      if (res.data.errno == 0) {
        this.value = res.data.data.defaultKeyword.keyword
        this.historyArr = res.data.data.historyKeywordList
        this.hotArr = res.data.data.historyKeywordList
        console.log(res.data.data.historyKeywordList);
        
        
        
      }
    });
  }
};
</script>

<style>

</style>